
<template>
    <div class="siderContainer">
        <ul class="siderList">
            <router-link v-for="(item,index) in urlList" :to=item.path :key="index">
                <li>
                    {{index+1}} : {{item.name}}
                </li>
            </router-link>
        </ul>
    </div>
</template>

<script>
import list from "../../config/list.js";

export default {
  name: "home",
  data() {
    return {
      urlList: list
    };
  },
};
</script>

<style scoped>
.siderContainer{
  padding: 0 0 20px 0;
  width: 200px;
  height: 100%;
  overflow-x: hidden;
}
.siderContainer .siderList{
  width: 220px;
  height: 100%;
  overflow-x: hidden;
}
ul {
  margin: 0;
  padding: 0;
}
a {
  text-decoration: none;
  color: #999;
}
a > li {
  list-style: none;
  line-height: 60px;
  height: 60px;
  size: 18px;
  padding: 0 20px;
  background-color: inherit;
  transition: background-color 0.5s,color 0.5s,border-left 0.5s;
}
a:not(.router-link-exact-active) :hover{
  background-color: #94c3f1;
  color: #f1f1f1;
  border-left: 10px solid #4ca3fa;
}
a.router-link-exact-active {
  color: #f1f1f1;
  background-color: #409eff;
}
a.router-link-exact-active > li {
  border-left: 10px solid #027af1;
}

</style>

